<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!--=============== icon ===============-->
  <link rel="shortcut icon" href="./assets/img/favicon.png" type="image/x-icon">

  <!--=============== 字体图标 ===============-->
  <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">

  <!--=============== CSS ===============-->
  <link rel="stylesheet" href="./assets/css/styles.css">

  <title>瑜伽官网</title>
</head>

<body>

  <!--==================== HEADER ====================-->
  <header class="header" id="header">
    <nav class="nav container">
      <a href="#" class="nav-logo">Yoga</a>

      <div class="nav-menu" id="nav-menu">
        <ul class="nav-list">
          <li class="nav-item">
            <a href="#home" class="nav-link active-link">Home</a>
          </li>

          <li class="nav-item">
            <a href="#health" class="nav-link">Health</a>
          </li>

          <li class="nav-item">
            <a href="#routine" class="nav-link">Routine</a>
          </li>

          <li class="nav-item">
            <a href="#follow" class="nav-link">Follow</a>
          </li>
        </ul>

        <!-- Close button -->
        <div class="nav-close" id="nav-close">
          <i class="ri-close-line"></i>
        </div>
      </div>

      <div class="nav-buttons">
        <!-- Theme change button -->
        <i class="ri-moon-line change-theme" id="theme-button"></i>

        <!-- Toggle button -->
        <div class="nav-toggle" id="nav-toggle">
          <i class="ri-apps-2-line"></i>
        </div>
      </div>



    </nav>
  </header>


  <!--==================== MAIN ====================-->
  <main class="main">

    <!--==================== HOME ====================-->
    <section class="home section" id="home">
      <div class="home-container container grid">
        <div class="home-data">
          <h1 class="home-title">
            Choose Your
            <div class="home-title-box">
              Best <div>Yoga</div>
            </div>
            Teacher

            <img src="./assets/img/star-img.svg">
          </h1>

          <p class="home-description">
            Calm your mind and body with the best
            yoga teachers availabke, relax your day
            and stay positive.

            <img src="./assets/img/circle-img.svg">
          </p>

          <a href="#" class="button">
            Get Started Free <i class="ri-arrow-right-line"></i>
          </a>

          <div class="home-box">
            <div>
              <h3>300+</h3>
              <span>Yoga Class</span>
            </div>

            <div>
              <h3>40+</h3>
              <span>Participants</span>
            </div>
          </div>
        </div>

        <img src="./assets/img/home-yoga.png" class="home-img">
      </div>
    </section>




    <!--==================== LIST ====================-->
    <section class="list section">
      <div class="list-container container grid">
        <div class="list-content">
          <h1 class="list-number">#01</h1>

          <div class="list-blob">
            <img src="./assets/img/list-yoga.png">
          </div>
        </div>

        <div class="list-data">
          <p class="list-description">
            Get a list of specific influencers in
            your niche at your fingertips so you can
            focus on managing your status.

            <img src="./assets/img/star-2-img.svg">
          </p>

          <a href="#" class="button list-button">
            Next <i class="ri-arrow-right-line"></i>

            <img src="./assets/img/ellipse-img.svg" alt="">
          </a>
        </div>
      </div>
    </section>



    <!--==================== HEALTH ====================-->
    <section class="health section" id="health">
      <div class="health-container container grid">
        <div class="health-data">
          <h2 class="section-title">
            Bring Happiness To
            Good Health!
          </h2>

          <p class="health-description">
            If you take care of your good health, take
            care of your mentality ans lead a healthy
            life with positive thoughts every day.
          </p>

          <a href="#" class="button">
            Let's Start <i class="ri-arrow-right-line"></i>
          </a>
        </div>

        <div class="health-image">
          <img src="./assets/img/health-fitness.png" class="health-img">

          <div class="health-rate">
            <div class="health-icon">
              <i class="ri-heart-3-fill"></i>
            </div>

            <div class="health-group">
              <span class="health-title">
                Heart Rate
              </span>

              <span class="health-number">
                168 bpm
              </span>
            </div>
          </div>

          <div class="health-course">
            <div class="health-group">
              <span class="health-number">
                500+
              </span>

              <span class="health-title">
                Free course
              </span>
            </div>
          </div>
        </div>
      </div>

    </section>



    <!--==================== ROUTINE ====================-->
    <section class="routine section" id="routine">
      <div class="routine-container container grid">
        <div class="routine-data">
          <h2 class="section-title">
            Anytime, Any Place,
            Any Workout
          </h2>

          <p class="routine-description">
            Take your routine at any time of your day,
            with the new videos and with the teachers
            who will guide you.
          </p>

          <a href="#" class="button">
            Get Started Free <i class="ri-arrow-right-line"></i>
          </a>
        </div>

        <div class="routine-images">
          <img src="./assets/img/routine-yoga-1.png" class="routine-img-1">
          <img src="./assets/img/routine-yoga-2.png" class="routine-img-2">

          <div class="routine-box-1">
            <i class="ri-play-circle-fill routine-icon"></i>
            <span class="routine-title">High Quality Video</span>
          </div>

          <div class="routine-box-2">
            <i class="ri-run-fill routine-icon"></i>
            <span class="routine-title">Professional Trainer</span>
          </div>
        </div>
      </div>
    </section>



    <!--==================== FOLLOW ====================-->
    <section class="follow section" id="follow">
      <div class="follow-container container grid">
        <div class="follow-content-1">
          <div class="follow-data">
            <h2 class="section-title follow-title">
              Follow Us On
              Instagram
              <div>#YOGA</div>
            </h2>

            <a href="" class="button follow-button">
              Follow <i class="ri-arrow-right-line"></i>
            </a>
          </div>

          <img src="./assets/img/follow-yoga-1.png" class="follow-img-1">
          <img src="./assets/img/follow-yoga-2.png" class="follow-img-2">
        </div>

        <div class="follow-content-2">
          <img src="./assets/img/follow-yoga-3.png" class="follow-img-3">
          <img src="./assets/img/follow-yoga-4.png" class="follow-img-4">
        </div>
      </div>

    </section>



    <!--==================== JOIN ====================-->
    <section class="join section">
      <div class="join-container container grid">
        <div class="join-content">
          <div>
            <h2 class="join-title">
              Join our newsletter
            </h2>

            <p class="loin-description">
              Subscribe to our newsletter to be aware of
              many things on discount, gifts, training
              and much more. Just enter your email.
            </p>
          </div>

          <form action="" class="join-form">
            <input type="email" placeholder="For latest update send mail" class="join-input">

            <button class="button join-button">
              Subscribe <i class="ri-arrow-right-line"></i>
            </button>
          </form>
        </div>
      </div>
    </section>
  </main>




  <!--==================== FOOTER ====================-->
  <footer class="footer">
    <div class="footer-container container grid">
      <div class="footer-content grid">
        <div>
          <a href="#" class="footer-logo">Yoga</a>

          <p class="footer-description">
            Take care of your health and <br>
            your mind with the best <br>
            Yoga classes.
          </p>
        </div>

        <div class="footer-data grid">
          <div>
            <h3 class="footer-title">Address</h3>

            <p class="footer-info">
              12345 M/01 Sol <br>
              Avenue, Lima, Peru
            </p>
          </div>

          <div>
            <h3 class="footer-title">Contact</h3>

            <p class="footer-info">
              +123 456 7890 <br>
              yoga@email.com
            </p>
          </div>

          <div>
            <h3 class="footer-title">Office</h3>

            <p class="footer-info">
              Monday - Saturday <br>
              9AM - 10PM
            </p>
          </div>
        </div>
      </div>

      <div class="footer-group">
        <ul class="footer-social">
          <li>
            <a href="https://www.facebook.com" target="_blank" class="footer-social-link">
              <i class="ri-facebook-circle-line"></i>
            </a>
          </li>

          <li>
            <a href="https://www.instagram.com" target="_blank" class="footer-social-link">
              <i class="ri-instagram-line"></i>
            </a>
          </li>

          <li>
            <a href="https://www.twitter.com" target="_blank" class="footer-social-link">
              <i class="ri-twitter-line"></i>
            </a>
          </li>

          <li>
            <a href="https://www.youtube.com" target="_blank" class="footer-social-link">
              <i class="ri-youtube-line"></i>
            </a>
          </li>
        </ul>

        <span class="footer-copy">
          &#169; Copyright Jetwang. All rights reserved
        </span>
      </div>
    </div>
  </footer>





  <!--========== SCROLL UP ==========-->
  <a href="#" class="scrollup" id="scroll-up">
    <i class="ri-arrow-up-line"></i>
  </a>



  <!--=============== SCROLLREVEAL ===============-->
  <script src="./assets/js/scrollreveal.min.js"></script>



  <!--=============== MAIN JS ===============-->
  <script src="./assets/js/main.js"></script>
</body>

</html>